<!--
 * @Description:位置的穿梭框
 * @Author: 0001101008/HuYuxi
 * @Date: 2021-09-06 11:19:11
 * @LastEditTime: 2021-09-16 09:59:18
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div>
    <el-dialog
      title="网元"
      class="dialog-box"
      width="640px"
      :visible.sync="diagPositionStatus"
      :close-on-click-modal="false"
      @close="cancle"
    >
      <div class="box-content">
        <kr-paging
          :dataList="dataList"
          :selectedData="selectedData"
          :pageSize="15"
          @onChange="onChange"
          filterable
        ></kr-paging>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle">{{$t('user.Cancel')}}</el-button>
        <el-button type="primary" @click="confirm">{{$t('user.Confirm')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['diagPositionStatus', 'dataList', 'selectedData'],
  data () {
    return {
      selectList: [],
      notSelectList: []
    };
  },
  mounted () { },
  methods: {
    // 取消
    cancle () {
      let _this = this;
      _this.selectList = [];
      _this.$emit('closePosition', false);
    },
    // 确定
    confirm () {
      let _this = this;
      _this.$emit('getPositionData', {
        use: _this.selectList,
        notUse: _this.notSelectList
      });
    },
    onChange (val) {
      let _this = this;
      _this.selectList = val;
      _this.notSelectList = [];
      this.selectedData.map(item => {
        if (item.disabled) {
          _this.notSelectList.push(item);
        }
      });
    }
  }
};
</script>